<template>
  <div class="demo">
    <div class="demo-title">useForm 嵌套表单</div>
    <div class="demo-content">
      <Form :label-col="labelCol" :wrapper-col="wrapperCol">
        <Form.Item label="Activity name" v-bind="validateInfos.name">
          <Input v-model:value="modelRef.name" />
        </Form.Item>
        <Form.Item label="Sub name" v-bind="validateInfos['sub.name']">
          <Input v-model:value="modelRef.sub.name" />
        </Form.Item>
        <Form.Item :wrapper-col="{ span: 14, offset: 4 }">
          <Button type="primary" @click.prevent="onSubmit">Create</Button>
          <Button style="margin-left: 10px" @click="reset">Reset</Button>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, toRaw } from 'vue';
  import Button from '@sscd/button';
  import Input from '@sscd/input';
  import Form from '@sscd/form';
  const labelCol = { span: 4 };
  const wrapperCol = { span: 14 };
  const modelRef = reactive({ name: '', sub: { name: '' } });
  const { resetFields, validate, validateInfos } = Form.useForm(
    modelRef,
    reactive({
      name: [{ required: true, message: 'Please input name' }],
      'sub.name': [{ required: true, message: 'Please input sub name' }],
    })
  );
  const onSubmit = () => {
    validate()
      .then((res) => console.log(res, toRaw(modelRef)))
      .catch((err) => console.log('error', err));
  };
  const reset = () => {
    resetFields();
  };
</script>
